<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>

<body>
  <!-- 外部容器 -->
  <div class="wrap">
    <!-- 内容部分 -->

    <div class="content">
      <!-- 轮播 -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./img/banner1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./img/banner2.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./img/banner3.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
      </div>
      <!-- 公告 -->
      <div class="anno">
        <h2>公告</h2>
        <ul>
          <a href="#">
            <span>
              <h3>05</h3>
              <i>2021</i>
            </span>
            <p>荣膺《商法》2020年“卓越律所”大奖</p>
          </a>
          <a href="#">
            <span>
              <h3>06</h3>
              <i>2021</i>
            </span>
            <p>钱伯斯评选为2021年度“公司/商事领域 西部（重庆）地区”第一等律所</p>
          </a>
          <a href="#">
            <span>
              <h3>07</h3>
              <i>2021</i>
            </span>
            <p>荣获“最受重庆海归青睐雇主奖”</p>
          </a>
        </ul>
      </div>
      <!-- 新闻 -->
      <div class="notice">
        <a href="">
          <h2 style="padding-bottom: 10px;">新闻资讯</h2>
        </a>
        <hr>
        <ul>
          <li>
            <img src="./img/news1.webp" alt="" width="">
            <div class="con">
              <h3>审议通过！万字解读《个人信息保护法》</h3>
              <p>《中华人民共和国个人信息保护法》与《中华人民共和国网络安全法》、《中华人民共和国数据安全法》（将于2021年9月1日生效）共同确立了我国数据安全法律框架的重要组成部分，其立法进程一直备受瞩目。</p>
            </div>
            <p><span>2021-08-22</span><a href="">了解更多>></a></p>
          </li>
          <li>
            <img src="./img/news2.webp" alt="" width="">
            <div class="con">
              <h3>从四大变化解读《关键信息基础设施安全保护条例》</h3>
              <p>2021年8月17日，中国政府网（www.gov.cn）发布了《关键信息基础设施安全保护条例》。</p>
            </div>
            <p><span>2021-08-22</span><a href="">了解更多>></a></p>
          </li>
          <hr>
          <li>
            <img src="./img/news1.webp" alt="" width="">
            <div class="con">
              <h3>审议通过！万字解读《个人信息保护法》</h3>
              <p>《中华人民共和国个人信息保护法》与《中华人民共和国网络安全法》、《中华人民共和国数据安全法》（将于2021年9月1日生效）共同确立了我国数据安全法律框架的重要组成部分，其立法进程一直备受瞩目。</p>
            </div>
            <p><span>2021-08-22</span><a href="">了解更多>></a></p>
          </li>
          <li>
            <img src="./img/news2.webp" alt="" width="">
            <div class="con">
              <h3>从四大变化解读《关键信息基础设施安全保护条例》</h3>
              <p>2021年8月17日，中国政府网（www.gov.cn）发布了《关键信息基础设施安全保护条例》。</p>
            </div>
            <p><span>2021-08-22</span><a href="">了解更多>></a></p>
          </li>
        </ul>
      </div>
      <!-- 律师 -->
      <div class="lawyer">
        <a href="">
          <h2>律师团队</h2>
        </a>
        <ul>
          <a href="#">
            <span>
              <img src="./img/lawyer.jpg" alt="">
            </span>
            <p>
              <span>马鑫律师</span>
              <span>执业证：14101202011251580</span>
              <span>刑事诉讼各阶段有效刑事辩护等服务，成功办理过多起取保候审、缓刑等</span>
            </p>
          </a>
          <a href="#">
            <span>
              <img src="./img/lawyer.jpg" alt="">
            </span>
            <p>
              <span>马鑫律师</span>
              <span>执业证:14101202011251580</span>
              <span>刑事诉讼各阶段有效刑事辩护等服务，成功办理过多起取保候审、缓刑等 </span>
            </p>
          </a>
          <a href="#">
            <span>
              <img src="./img/lawyer.jpg" alt="">
            </span>
            <p>
              <span>马鑫律师</span>
              <span>执业证：14101202011251580</span>
              <span>刑事诉讼各阶段有效刑事辩护等服务，成功办理过多起取保候审、缓刑等</span>
            </p>
          </a>
        </ul>
      </div>
      <!-- 热议 -->
      <div class="discuss">
        <!-- 帖子 点击可到达帖子列表 -->
        <a href="">
          <h2>热议</h2>
        </a>
        <!-- 每块帖子 -->
        <a href="" class="block">
          <!-- 帖子用户信息 -->
          <div class="userinfor">
            <!-- 头像 -->
            <div class="via"></div>
            <!-- 用户昵称 -->
            <span>chy</span>
          </div>
          <div class="block-con">
            <div class="title">民法典的颁布具有重大意义！！</div>
            <div class="text">
              我认为我们日常所遇到的很多问题在以前法律条文中是没有明确声明的，民法典恰好做到了完善这一部分，是中国构建法治社会的又一重大进步。
            </div>
          </div>
          <!-- 评论 回复 -->
          <div class="bottom">
            <!-- 发布日期 -->
            <div class="bo-con">
              <span>2021-08-21</span>
              <!-- 回复 -->
              <i class="fa fa-comment-o" aria-hidden="true"></i>
            </div>
            <ul class="reply">
              <li>
                <p>讲的好棒啊</p>
                <span>2021-8-5</span>
              </li>
            </ul>
          </div>

        </a>
        <a href="" class="block">
          <!-- 帖子用户信息 -->
          <div class="userinfor">
            <!-- 头像 -->
            <div class="via"></div>
            <!-- 用户昵称 -->
            <span>chy</span>
          </div>
          <div class="block-con">
            <div class="title">民法典的颁布具有重大意义！！</div>
            <div class="text">
              我认为我们日常所遇到的很多问题在以前法律条文中是没有明确声明的，民法典恰好做到了完善这一部分，是中国构建法治社会的又一重大进步。
            </div>
          </div>
          <!-- 评论 回复 -->
          <div class="bottom">
            <!-- 发布日期 -->
            <div class="bo-con">
              <span>2021-08-21</span>
              <!-- 回复 -->
              <i class="fa fa-comment-o" aria-hidden="true"></i>
            </div>
            <ul class="reply">
              <li>
                <p>讲的好棒啊</p>
                <span>2021-8-5</span>
              </li>
            </ul>
          </div>

        </a>
        <a href="" class="block">
          <!-- 帖子用户信息 -->
          <div class="userinfor">
            <!-- 头像 -->
            <div class="via"></div>
            <!-- 用户昵称 -->
            <span>chy</span>
          </div>
          <div class="block-con">
            <div class="title">民法典的颁布具有重大意义！！</div>
            <div class="text">
              我认为我们日常所遇到的很多问题在以前法律条文中是没有明确声明的，民法典恰好做到了完善这一部分，是中国构建法治社会的又一重大进步。
            </div>
          </div>
          <!-- 评论 回复 -->
          <div class="bottom">
            <!-- 发布日期 -->
            <div class="bo-con">
              <span>2021-08-21</span>
              <!-- 回复 -->
              <i class="fa fa-comment-o" aria-hidden="true"></i>
            </div>
            <ul class="reply">
              <li>
                <p>讲的好棒啊</p>
                <span>2021-8-5</span>
              </li>
            </ul>
          </div>

        </a>
      </div>
    </div>
    <!-- 底部导航固定部分 -->
    <div class="footer">
      <ul>
        <li class="active"><i class="fa fa-home"></i><a href="">首页</a></li>
        <li><i class="fa fa-star"></i><a href="">律师帮您</a></li>
        <li><i class="fa fa-bolt"></i><a href="">圈子</a></li>
        <li><i class="fa fa-user"></i><a href="">我的</a></li>
      </ul>
    </div>
  </div>
  <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
  <script>
    // 轮播
    var mySwiper = new Swiper('.swiper-container', {
      autoplay: true, //等同于以下设置
      /*autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
        },*/
      direction: 'horizontal', // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    });
  </script>

</body>

</html>